<template>
    <div class="p-20">
        <Row :gutter="10" class="p-b-20">
        <#list columns as po><#if po.isQuery=='Y'>
            <Col span="3">
            <#if po.queryModel=='single'>
                <#if po.showType=='date'>
                    <DatePicker type="date" format="yyyy-MM-dd" v-model="params.${po.fieldName}" @on-change="getData(1)" size="small" />
                <#elseif po.showType=='select'>
                    <Select v-model="params.${po.fieldName}" clearable filterable placeholder="请选择${po.description}">
                        <Option v-for="data in datas" :value="data.id" :key="data.id">{{ data.${po.fieldName} }}</Option>
                    </Select>
                <#elseif po.showType=='radio'>
                    <Select v-model="params.${po.fieldName}" clearable placeholder="请选择${po.description}">
                        <Option v-for="(value, key) in options.${po.fieldName}" :value="key" :key="key">{{ value }}</Option>
                    </Select>
                <#else>
                    <#if po.queryType == 'like'>
                        <Input v-model="params.${po.fieldName}Key" placeholder="请输入${po.description}" />
                    <#else>
                        <Input v-model="params.${po.fieldName}" placeholder="请输入${po.description}" />
                    </#if>
                </#if>
            <#else>
                <#if po.showType=='date'>
                    <DatePicker v-model="${po.fieldName}ParamsTime" type="daterange" :start-date="new Date()" placement="bottom-end" placeholder="选择起止${po.description}"></DatePicker>
                <#else>
                    <InputNumber v-model="params.${po.fieldName}Start" placeholder="从"></InputNumber>
                    <InputNumber v-model="params.${po.fieldName}End" placeholder="到"></InputNumber>
                </#if>
            </#if>
            </Col>
        </#if></#list>
            <Col span="2">
                <Button type="info" @click="getData(1)">搜索</Button>
            </Col>
            <Col span="2" class-name="text-r">
                <Button type="success" @click="showModal()">添加</Button>
            </Col>
        </Row>
        <Table border :columns="columns" :data="${className?uncap_first}.datas" ref="table">
            <template slot-scope="{ row }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="seeModal(row)">查看</Button>
                <Button type="success" size="small" style="margin-right: 5px" @click="showModal(row)">编辑</Button>
                <Button type="error" size="small" @click="handleDelete(row)">删除</Button>
            </template>
        </Table>
        <Col span="12" class-name="p-t-20 p-b-20">
            <Button type="primary" style="margin-right: 5px" @click="delSelection()">
                <Icon type="ios-trash-outline"></Icon>
                批量删除
            </Button>
            <Button type="primary" style="margin-right: 5px">
                <Icon type="ios-arrow-round-up"></Icon>
                批量导入
            </Button>
            <Button type="primary" @click="exportData()">
                <Icon type="ios-arrow-round-down"></Icon>
                批量导出
            </Button>
        </Col>
        <Col span="12" class-name="text-r p-t-20 p-b-20">
            <Page :current="page" :total="${className?uncap_first}.outputPage.totalResult" :page-size="params.rows" show-total @on-change="getData"/>
        </Col>

        <Modal :width="800" v-model="modal.show" :loading="modal.loading" :title="modal.data.id? '编辑${description}':'新增${description}'" @on-ok="isOkBtn()">
            <Form ref="form" :rules="modal.rules" :model="modal.data" :label-width="180">
                <#list columns as po>
                    <#if po.isShowForm == 'Y'>
                        <#if po.showType == 'textarea'>
                            <FormItem class="w-80" label="${po.description}：" prop="${po.fieldName}">
                                <Input v-model="modal.data.${po.fieldName}" type="textarea" :autosize="{minRows: 4,maxRows: 6}" placeholder="请输入${po.description}" />
                            </FormItem>
                        <#elseif po.showType == 'password'>
                            <FormItem class="w-80" label="${po.description}：" prop="${po.fieldName}">
                                <Input v-model="modal.data.${po.fieldName}" type="password" placeholder="请输入${po.description}" />
                            </FormItem>
                            <FormItem class="w-80" label="确认${po.description}：" prop="${po.fieldName}Confirm">
                                <Input v-model="modal.data.${po.fieldName}Confirm" type="password" placeholder="请再次输入${po.description}" />
                            </FormItem>
                        <#elseif po.showType == 'date'>
                            <FormItem label="${po.description}：" prop="${po.fieldName}">
                                <CwDatePicker v-model="modal.data.${po.fieldName}" type="datetime" placeholder="请选择${po.description}" />
                            </FormItem>
                        <#elseif po.showType == 'select'>
                            <FormItem class="w-50" label="${po.description}：" prop="${po.fieldName}">
                                <Select v-model="modal.data.${po.fieldName}" @on-change="set${po.fieldName?cap_first}" clearable filterable placeholder="请选择${po.description}">
                                    <Option v-for="data in datas" :value="data.id" :key="data.id">{{ data.${po.fieldName} }}</Option>
                                </Select>
                            </FormItem>
                        <#elseif po.showType == 'radio'>
                            <FormItem label="${po.description}：" prop="${po.fieldName}">
                                <Select v-model="modal.data.${po.fieldName}" clearable placeholder="请选择${po.description}">
                                    <Option v-for="(value, key) in options.${po.fieldName}" :value="key" :key="key">{{ value }}</Option>
                                </Select>
                            </FormItem>
                        <#elseif po.showType == 'switch'>
                            <FormItem label="${po.description}：" prop="${po.fieldName}">
                                <Switch v-model="modal.data.${po.fieldName}" true-value="1" false-value="0" />
                            </FormItem>
                        <#elseif po.showType == 'checkbox'>
                            <FormItem label="${po.description}：" prop="${po.fieldName}">
                                <CheckboxGroup v-model="modal.data.${po.fieldName}">
                                    <Checkbox v-for="(value, key) in options.${po.fieldName}" :label="key" :key="key">{{ value }}</Checkbox>
                                </CheckboxGroup>
                            </FormItem>
                        <#elseif po.showType == 'photo'>
                            <FormItem label="${po.description}：" prop="${po.fieldName}">
                                <PhotoUpload v-model="modal.data.${po.fieldName}" />
                            </FormItem>
                        <#elseif po.showType == 'number'>
                            <FormItem label="${po.description}：" prop="${po.fieldName}">
                                <InputNumber v-model="modal.data.${po.fieldName}" placeholder="${po.description}"></InputNumber>
                            </FormItem>
                        <#elseif po.showType == 'disabled'>
                            <FormItem label="${po.description}：">
                                <Input v-model="modal.data.${po.fieldName}" disabled />
                            </FormItem>
                        <#else>
                            <FormItem label="${po.description}：" prop="${po.fieldName}">
                                <Input v-model="modal.data.${po.fieldName}" placeholder="${po.description}" />
                            </FormItem>
                        </#if>
                    </#if>
                </#list>
            </Form>
        </Modal>
        <Modal :width="800" v-model="modal.detailShow" title="查看${description}" footer-hide>
            <#list columns as po>
                <#if po.isShowForm == 'Y'>
                    <Vcell title="${po.description}：">
                    <#if po.fieldType == 'Date'>
                        {{ util.timeFormat(modal.data.${po.fieldName}) }}
                    <#elseif po.showType == 'radio'>
                        {{options.${po.fieldName}[modal.data.${po.fieldName}]}}
                    <#else>
                        {{ modal.data.${po.fieldName} }}
                    </#if>
                    </Vcell>
                </#if>
            </#list>
        </Modal>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {options} from '../options'
    import {util} from '@/libs'
    import {config} from '@/config'
    import PhotoUpload from '@/components/libs/PhotoUpload'

    const _init = {}
    export default {
        components: { PhotoUpload },
        data() {
        <#list columns as po>
            <#if po.isShowForm=='Y' && po.formValidType=='1' && po.showType=='password'>
                const ${po.fieldName}Confirm = (rule, value, callback) => {
                    if (value === this.modal.data.password) callback()
                    callback(new Error('两次密码输入不一致！'))
                }
            </#if>
        </#list>
            return {
        <#list columns as po>
            <#if po.isQuery=='Y' && po.queryModel=='group' && po.showType=='date'>
                ${po.fieldName}ParamsTime: [],
            </#if>
        </#list>
                params: {rows: config.table.rows},
                options,
                util,
                columns: [
                    {type: 'selection', width: 60, align: 'center'},
            <#list columns as po>
                <#if po.isShowList == 'Y'>
                    <#if po.showType=='date'>
                    {
                        title: '${po.description}',
                        key: '${po.fieldName}',
                        render(h, w) {
                            return h('span', util.timeFormat(w.row.${po.fieldName}))
                        }
                    },
                    <#elseif po.showType == 'radio'>
                    {
                        title: '${po.description}',
                        key: '${po.fieldName}',
                        render(h, w) {
                            return h('span', options.${po.fieldName}[w.row.${po.fieldName}])
                        }
                    },
                    <#else>
                    {title: '${po.description}', key: '${po.fieldName}'},
                    </#if>
                </#if>
            </#list>
                    {title: '操作', width: 180, slot: 'action'}
                ],
                modal: {
                    show: false,
                    detailShow: false,
                    loading: true,
                    rules: {
                        <#list columns as po>
                            <#if po.isShowForm=='Y'>
                                <#if po.formValidType=='1'>
                                    ${po.fieldName}: [
                                        <#if po.showType == 'password'>
                                        { pattern: config.pattern.pass, message: '大于6位数字或英文字母', trigger: 'blur' },
                                        </#if>
                                    {
                                        required: true,
                                        message: '${po.description}为必填项',
                                    <#if po.fieldType == 'Date'>
                                        trigger: 'blur, change',
                                        validator(rule, value, callback) {
                                            value ? callback() : callback(new Error('${po.description}为必填项'))
                                        },
                                    <#elseif po.showType == 'number'>
                                        type: 'number',
                                        trigger: 'blur'
                                    <#elseif po.showType != 'select' && po.showType != 'radio'>
                                        trigger: 'blur'
                                    </#if>
                                    }],
                                    <#if po.showType == 'password'>
                                        ${po.fieldName}Confirm: [{ required: true, validator: ${po.fieldName}Confirm, trigger: 'blur' }],
                                    </#if>
                                </#if>
                            </#if>
                        </#list>
                    },
                    data: _init
                }
            }
        },
        computed: {
            page() {
                return parseInt(this.$route.query.page) || config.table.page
            },
            ...mapState({
                ${className?uncap_first}: state => state.${className?uncap_first}
            })
        },
        created()
        {
            this.getData()
        },
        watch: {
        <#list columns as po>
            <#if po.isQuery=='Y' && po.queryModel=='group' && po.showType=='date'>
                ${po.fieldName}ParamsTime(val){
                    this.params.${po.fieldName}Start = val[0]
                    this.params.${po.fieldName}End = val[1]
                }
            </#if>
        </#list>
        },
        methods: {
            getData(page = this.page){
                const params = {page}
                page > 1 ? this.$router.push({
                    path: this.$route.path,
                    query: {page}
                }) : this.$router.push({path: this.$route.path})
                Object.assign(params, this.params)
                util.delNullParams(params)
                return this.$store.dispatch('/Get${className}', params)
            },
    <#list columns as po>
        <#if po.isShowForm == 'Y'&& po.showType == 'select'>
            set${po.fieldName?cap_first}(v){
                if(v)
                this.$nextTick(() => {
                    const data = this..datas.find(item => item.id === v)
                    this.$set(this.modal.data, '${po.fieldName}', data.${po.fieldName})
                })
            },
        </#if>
    </#list>
            seeModal(data){
                this.modal.detailShow = true
                this.modal.data = util.deepcopy(data)
            },
            showModal(data = _init){
                this.$refs.form.resetFields()
                this.modal.show = true
                this.modal.data = util.deepcopy(data)
            },
            isOkBtn(){
                util.formValidate(this, 'form', this.modal, () => this.$store.dispatch('/Update${className}', this.modal.data))
            },
            handleDelete(data){
                this.$Modal.confirm({
                    title: '确定删除吗？',
                    onOk: () => {
                        this.deleteData(data)
                    }
                })
            },
            deleteData(data){
                this.$store.dispatch('/Del${className}', data)
            },
            delSelection(){
                this.$Modal.confirm({
                    title: '确定删除选择的数据吗？',
                    onOk: () => {
                        this.$refs.table.getSelection().forEach(item => this.deleteData(item))
                    }
                })
            },
            exportData(){
                const data = this.$refs.table.getSelection().map(item => {
                    return {
                        ...item,
                    }
                })
                if (data.length !== 0) {
                    this.$refs.table.exportCsv({
                        filename: `【${r'${Date.format(null)}'}】${description}`,
                        columns: this.columns.filter(item => (item.slot !== 'action') & (item.type !== 'selection')),
                        data
                    })
                } else {
                    this.$Message.warning('未选择数据')
                }
            }
        }
    }
</script>
